<template>
  <Drawer
    width="50%"
    title="查看详情"
    placement="right"
    v-model:visible="visible"
    :footer-style="{ textAlign: 'right' }"
    @close="close"
    :footer="false"
  >
    <template #closeIcon>
      <ArrowLeftOutlined />
    </template>

    <Form :model="formState" ref="formRef">
      <TypographyTitle :level="5"> 基本内容</TypographyTitle>
      <Row :gutter="16">
        <Col :span="12">
          <FormItem label="权限名称" name="name">
            {{ formState.name }}
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem label="类型">
            {{ formState.isBuiltIn ? '内置' : '非内置' }}
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col :span="12">
          <FormItem label="创建时间">
            {{ formState.createdTime }}
          </FormItem>
        </Col>
        <Col :span="12">
          <FormItem label="描述">
            {{ formState.description }}
          </FormItem>
        </Col>
      </Row>
      <Divider />
      <TypographyTitle :level="5"> 策略内容</TypographyTitle>
      <div v-for="item in formState.statementList" :key="item.id">
        <FormItem label="策略ID">
          {{ item.id }}
        </FormItem>
        <Row :gutter="16">
          <Col :span="12">
            <FormItem label="策略名称">
              {{ item.name }}
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="结果">
              {{ item.effect }}
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col :span="12">
            <FormItem label="策略行为">
              {{ item.actionList }}
            </FormItem>
          </Col>
          <Col :span="12">
            <FormItem label="策略描述">
              {{ item.description }}
            </FormItem>
          </Col>
        </Row>
      </div>
    </Form>
  </Drawer>
</template>
<script lang="ts" setup>
import { Drawer, Form, FormItem, Divider, TypographyTitle, Row, Col } from 'ant-design-vue';
import { reactive, ref } from 'vue';
import { ArrowLeftOutlined } from '@ant-design/icons-vue';
import { DetailItem } from '/@/api/work-order/userManagement/authorityManagement/model/authorityMgtModel';
import { getPolicyDetail } from '/@/api/work-order/userManagement/authorityManagement/authorityMgt';

const visible = ref(false);
let formState = reactive({} as DetailItem);

const getDetailData = async (id) => {
  formState = await getPolicyDetail(id);
  formState = {
    createdTime: '123',
    description: '55555555555555555555555',
    id: 123,
    isBuiltIn: true,
    name: 'AAAAAAAAAAAAA',
    statementList: [
      {
        actionList: ['1111111111', 'CCCCCCCCCCCC'],
        description: 'ASDGASDGA',
        effect: 'ALLOW',
        id: 345,
        name: 'ASDFASD',
      },
    ],
  };
};

const openDetail = async (record) => {
  getDetailData({ policyId: record.id });
  visible.value = true;
};
const close = () => {
  visible.value = false;
  formState = {} as DetailItem;
};

defineExpose({ openDetail });
</script>
